系統功能

1. 系統 Header 的設計，是把多個元件放在同一排 Header 上，並隨著視窗的放大和縮小，調整相對比例。
2. 課程的設計，把多個課程放在同一排上，並隨著視窗的放大和縮小，調整相對比例。

技術手法

這一章要講的是 CSS 的佈局手法，傳統的網頁就是使用相對位置從第一行開始放置各元件，或是用絕對位置放置元件，用這2種方式，都很難處理不同的瀏覽方式（使用電腦或手機），或在解析度不同的狀況下，網頁版型不會亂掉。

此處採用的方式是使用 Flex 的手法，它是個非常好用的排版工具，用它來做網頁也更容易達到響應式網頁的效果，因為它有極強大的調適能力，可以隨著網頁縮放去改變比例，另外還有一種是 Grid 手法，也可達到類似的功能，不過我覺得採用 Flex 已經可以滿足我的需求。由下圖也可看出，這個網頁的架構，處處都是使用 Flex。

Flex 的使用方式，應該很多網頁講得很清楚了，不想在這裡再去做說明，這邊放一個網頁的連結，有興趣的人可以去這網頁看看
https://www.casper.tw/css/2017/07/21/css-flex/
 

display: flex 表示這個元件是 flex 的本體
justify-content: space-between; 表示這 Flex 中的物件，是等間隔分配。
align-items: center 表示這 Flex 中的物件，等是垂直置中對齊。

.header {
  font-size: 1.4rem;
  height: 7rem;
  background-color: #fff;
  border-bottom: var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media only screen and (max-width: $bp-smallest) {
    flex-wrap: wrap;
    align-content: space-around;
    height: 11rem;
  }
}

.detail-right-side {
  font-size: 1.4rem;
  display: flex;
  padding: 0rem;
  margin-left: 0rem;
  background-color: var(--color-grey-light-1);
  border-bottom: var(--line);
  flex-wrap: wrap;
  margin: 0.5rem;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  text-align: left;
}

語文學習03-居家與外出

1. 你在做什麼？我在家打掃
2. 你要去哪裡？我要去西門町
3. 你要去那做什麼？和朋友去咖啡廳聊天
4. 〖單字〗居家活動
5. 〖單字〗場所
6. 〖單字〗外出活動